<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios 创建对象发送请求</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <!-- 基地址:  http://api.xiaohigh.com -->
  <button>王者荣耀</button>
  <button>英雄联盟</button>
  <hr>
  <!-- 基地址:  http://127.0.0.1:3000 -->
  <button>电影</button>
  <button>歌曲</button>

  <script>
    // 两个基地址 这种方法不可取
    // axios.defaults.baseURL = 'http://api.xiaohigh.com'


    // 解决:
    // 当一个前端项目需要请求多个后台服务的接口时  必须使用create()  create方法返回的是一个函数 返回的是新的axios

    const newAxios1 = axios.create({
      baseURL: 'http://api.xiaohigh.com', // 基地址
      timeout: 20000 
    })

    const newAxios2 = axios.create({
      baseURL: 'http://127.0.0.1:3000', // 基地址
      timeout: 20000
    })


    const btns = document.querySelectorAll('button');
    btns[0].onclick = async function () {
      newAxios1.get('/heros') // 
    }
    btns[1].onclick = async function () {
      newAxios1.get('/lol')
    }

    btns[2].onclick = async function () {
      newAxios2.get('/movie')
    }
    btns[3].onclick = async function () {
      newAxios2.get('/book')
    }

  </script>
</body>

</html>